<template>
  <div class="pop-up" v-show="echart_curve">
    <i class="el-icon-error" @click="handleClose()"></i>
    <div class="pop-up-back">
      <div ref="ref_curve" v-show="echart_curve" style="width: 100%; height: 580px"></div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
var barChartOptions = {
  title: {
    text: "",
    textStyle: {
      color: "#ffffff",
    },
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: [],
    textStyle: {
      color: "#ffffff",
    },
  },
  grid: {
    left: "3%",
    right: "1%",
    bottom: "3%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [],
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff",
      },
    },
    axisTick: {
      alignWithLabel: true,
    },
  },
  dataZoom: [
    {
      //默认为滚动条型数据区域缩放组件
      show: true,
      start: 60,
      end: 0,
    },
  ],
  yAxis: {
    type: "value",
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff",
      },
    },
  },
  series: [
    {
      name: "",
      type: "line",
      stack: "Total",
      data: [],
      textStyle: {
        color: "#ffffff",
      },
    },
  ],
};
export default {
  setup(props, conts) {
    const echart_curve = conts.attrs.echart_curve;
    const valueList = conts.attrs.valueList;
    const timeList = conts.attrs.timeList;
    const echarts_name = conts.attrs.echarts_name;
    const ref_curve = ref();
    onMounted(async () => {
      // 初始化
      let barChart = echarts.init(ref_curve.value);
      barChartOptions.series[0].data = valueList;
      barChartOptions.xAxis.data = timeList;
      barChartOptions.title.text = echarts_name;
      barChart.setOption(barChartOptions);
      window.onresize = function () {
        //自适应大小, 不用的话不会自适应大小。
        barChart.resize();
      };
    });
    const handleClose = () => {
      conts.emit("handleClose", false);
    };
    return {
      echarts_name,
      timeList,
      valueList,
      echart_curve,
      ref_curve,
      handleClose,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/device.less";
@import "../assets/css/common.css";

.pop-up {
  top: 0;
  background: rgba(112, 112, 112, 0.397);
}

.el-icon-error {
  color: #fff;
}
</style>
